1
00:00:02,070 --> 00:00:04,600
ตอนนี้เราได้เรียนรู้มาบ้างแล้ว

2
00:00:04,600 --> 00:00:06,910
เกี่ยวกับ Redux แต่จนถึงจุดนี้

3
00:00:06,910 --> 00:00:10,960
เรามักจะทำงานกับค่าตัวนับเดียวของเราเสมอ

4
00:00:10,960 --> 00:00:13,600
ตอนนี้ฉันมีปุ่ม Toggle Counter ที่นี่

5
00:00:13,600 --> 00:00:14,710
และเมื่อคลิกแล้ว

6
00:00:14,710 --> 00:00:17,090
ฉันต้องการให้แน่ใจว่าเคาน์เตอร์ถูกซ่อนอยู่

7
00:00:17,090 --> 00:00:19,710
และเมื่อคลิกอีกครั้งก็ควรจะแสดงอีกครั้ง

8
00:00:19,710 --> 00:00:23,253
แน่นอนว่าตอนนี้เราสามารถใช้ useState ได้

9
00:00:24,113 --> 00:00:27,420
ดังนั้นเราจึงสามารถตั้งค่าสถานะท้องถิ่นบางส่วนในส่วนนี้ได้

10
00:00:27,420 --> 00:00:31,400
ซึ่งเราจัดการด้วย useState ไม่ใช่ด้วย Redux

11
00:00:31,400 --> 00:00:34,090
และนั่นคงเป็นแนวทางที่ถูกต้อง

12
00:00:34,090 --> 00:00:37,180
เพราะการแสดงหรือซ่อนเคาน์เตอร์

13
00:00:37,180 --> 00:00:40,900
เป็นสิ่งที่น่าสนใจสำหรับองค์ประกอบนี้เท่านั้น

14
00:00:40,900 --> 00:00:44,080
ไม่ใช่ส่วนอื่นใดของแอปพลิเคชัน

15
00:00:44,080 --> 00:00:46,990
แต่เคาน์เตอร์ของเราก็สามารถกำหนดสิ่งเดียวกันได้

16
00:00:46,990 --> 00:00:50,410
เราใช้ตัวนับในส่วนนี้เท่านั้น

17
00:00:50,410 --> 00:00:53,660
ดังนั้นในทางเทคนิคแล้วตัวนับก็เป็นสถานะท้องถิ่นด้วย

18
00:00:54,560 --> 00:00:57,400
แต่นี่เป็นเพียงการสาธิตง่ายๆ ในการเริ่มต้น

19
00:00:57,400 --> 00:01:01,540
สมมุติว่าทั้งเคาน์เตอร์และรัฐ

20
00:01:01,540 --> 00:01:03,930
ไม่ว่าจะเห็นเคาน์เตอร์ตรงไหนก็ตาม

21
00:01:03,930 --> 00:01:06,940
เป็นรัฐระดับโลกที่มีความน่าสนใจเช่นกัน

22
00:01:06,940 --> 00:01:10,540
ไปยังส่วนประกอบอื่นๆ แม้ว่าจะไม่เป็นเช่นนั้นก็ตาม

23
00:01:10,540 --> 00:01:13,200
เมื่อเราก้าวหน้าเมื่อเรารู้พื้นฐานเหล่านี้แล้ว

24
00:01:13,200 --> 00:01:16,530
แน่นอนว่าเราจะทำการสาธิตและโปรเจ็กต์ด้วย

25
00:01:16,530 --> 00:01:19,270
ในกรณีนี้จริงๆ

26
00:01:19,270 --> 00:01:21,820
แต่สำหรับตอนนี้ เรามาสมมุติกันก่อน

27
00:01:21,820 --> 00:01:23,560
ดังนั้นเมื่อเราคลิกปุ่มนี้

28
00:01:23,560 --> 00:01:26,520
toggleCounterHandler เริ่มทำงาน

29
00:01:26,520 --> 00:01:29,900
แล้วที่นี่เราต้องการส่งการดำเนินการ

30
00:01:29,900 --> 00:01:32,720
ซึ่งเปลี่ยนสถานะบางอย่างใน Redux

31
00:01:32,720 --> 00:01:36,263
ซึ่งควบคุมว่า div ตัวนับนี้จะแสดงหรือไม่

32
00:01:37,910 --> 00:01:41,080
สำหรับสิ่งนี้ เราจำเป็นต้องเพิ่มสถานะใหม่

33
00:01:41,080 --> 00:01:45,400
ข้อมูลชิ้นใหม่สำหรับร้านค้า Redux ของเรา

34
00:01:45,400 --> 00:01:48,310
และตอนนี้เราจะทำเช่นนั้นได้อย่างไร?

35
00:01:48,310 --> 00:01:50,750
Well, to add a new piece of data,

36
00:01:50,750 --> 00:01:54,910
เราต้องไปที่ตัวลดของเราในตอนท้ายแล้วเพิ่มเข้าไป

37
00:01:54,910 --> 00:01:59,910
สำหรับสแนปชอตสถานะทั้งหมดที่เรากำลังผลิต

38
00:02:00,050 --> 00:02:02,750
เริ่มต้นด้วยภาพรวมสถานะเริ่มต้น

39
00:02:02,750 --> 00:02:05,370
เมื่อเราเริ่มต้นนอกจากจะมีเคาน์เตอร์แล้ว

40
00:02:05,370 --> 00:02:09,500
ซึ่งมีค่าเป็นศูนย์ ฉันอยากได้ฟิลด์ showCounter

41
00:02:09,500 --> 00:02:14,230
ซึ่งมีค่าเป็นจริงหรือเท็จก็ขึ้นอยู่กับคุณ

42
00:02:14,230 --> 00:02:15,980
และเพื่อให้อ่านง่ายขึ้นอีกหน่อย

43
00:02:15,980 --> 00:02:18,970
ผมจะแยกมันออกมาและเก็บมันไว้คงที่

44
00:02:18,970 --> 00:02:22,520
ตั้งชื่อเริ่มต้นสถานะเช่นนี้

45
00:02:22,520 --> 00:02:25,080
และกำหนด InitialState ที่นี่

46
00:02:25,080 --> 00:02:27,223
เพียงเพื่อให้อ่านง่ายขึ้นเล็กน้อย

47
00:02:28,370 --> 00:02:32,790
ตอนนี้เมื่อเราเพิ่มขึ้น เรากำลังเปลี่ยนตัวนับ

48
00:02:32,790 --> 00:02:35,490
เราไม่สนใจ showCounter

49
00:02:35,490 --> 00:02:40,490
เรายังจำเป็นต้องตั้งค่าคุณสมบัติ showCounter ที่นี่

50
00:02:40,550 --> 00:02:44,490
เนื่องจากเรากำลังส่งคืนออบเจ็กต์สถานะโดยรวม

51
00:02:44,490 --> 00:02:48,720
และ Redux จะไม่รวมการเปลี่ยนแปลงของคุณกับสถานะที่มีอยู่

52
00:02:48,720 --> 00:02:50,990
มันจะใช้เวลาสิ่งที่คุณกลับมาแทน

53
00:02:50,990 --> 00:02:54,360
และแทนที่สถานะที่มีอยู่ด้วย

54
00:02:54,360 --> 00:02:56,350
เพิ่มเติมเกี่ยวกับเรื่องนี้ในไม่กี่วินาที

55
00:02:56,350 --> 00:02:58,540
แต่ชั่วขณะนั้นก็แค่ยอมรับมัน

56
00:02:58,540 --> 00:03:03,080
และตั้งค่า showCounter ที่นี่เป็น state.showCounter

57
00:03:03,080 --> 00:03:05,970
เท่าที่เรามีอยู่ในรัฐของเราในปัจจุบัน

58
00:03:05,970 --> 00:03:08,480
เพราะการเพิ่ม เราไม่อยากเปลี่ยนมัน

59
00:03:08,480 --> 00:03:12,263
ดังนั้นเราจะใช้ค่า showCounter ที่มีอยู่

60
00:03:13,670 --> 00:03:16,510
แล้วเราก็ทำแบบเดียวกันตรงนี้เพื่อเพิ่มได้

61
00:03:16,510 --> 00:03:18,330
เพราะที่นั่นเราก็อยากจะเก็บไว้เช่นกัน

62
00:03:18,330 --> 00:03:21,230
ค่า showCounter ที่มีอยู่

63
00:03:21,230 --> 00:03:24,173
และทำแบบเดียวกันเพื่อลดค่าตรงนี้

64
00:03:25,780 --> 00:03:29,650
แต่ตอนนี้ฉันจะจัดการกับประเภทการกระทำใหม่ด้วย

65
00:03:29,650 --> 00:03:32,700
และอีกอย่าง เนื่องจากเรามีคำสั่ง if มากมายที่นี่

66
00:03:32,700 --> 00:03:35,670
เรายังสามารถใช้คำสั่ง switch case ได้ด้วย

67
00:03:35,670 --> 00:03:38,900
แต่ฉันจะยึดถือหลายคำสั่ง if ที่นี่ในตอนนี้

68
00:03:38,900 --> 00:03:41,310
และในการดำเนินการประเภทใหม่นี้

69
00:03:41,310 --> 00:03:44,700
ฉันจะตรวจสอบ สมมติว่าสลับ

70
00:03:44,700 --> 00:03:47,700
ตอนนี้ตัวระบุก็เหมือนกับตัวระบุทั้งหมดเหล่านี้

71
00:03:47,700 --> 00:03:48,950
ขึ้นอยู่กับคุณ

72
00:03:48,950 --> 00:03:53,180
ฉันจะไปกับการสลับแล้วส่งคืนวัตถุใหม่

73
00:03:53,180 --> 00:03:56,540
ตอนนี้เราต้องการเปลี่ยน showCounter

74
00:03:56,540 --> 00:04:00,100
และตั้งให้ตรงกันข้ามกับที่เคยเป็นมาก่อน

75
00:04:00,100 --> 00:04:03,040
ถ้ามันเป็นเรื่องจริง เราอยากจะตั้งให้เป็นเท็จ

76
00:04:03,040 --> 00:04:05,960
ถ้ามันเป็นเท็จ เราต้องการตั้งค่าให้เป็นจริง

77
00:04:05,960 --> 00:04:09,080
และเราสามารถทำได้โดยการเพิ่มเครื่องหมายอัศเจรีย์

78
00:04:09,080 --> 00:04:11,900
จากนั้นเข้าถึง state.showCounter

79
00:04:11,900 --> 00:04:14,023
สิ่งนี้จะกลับค่า

80
00:04:14,890 --> 00:04:18,010
สำหรับตัวนับ เราต้องการคงสถานะที่มีอยู่ไว้

81
00:04:18,010 --> 00:04:21,010
because we don't wanna change this here for this action.

82
00:04:21,010 --> 00:04:23,593
ดังนั้นเราจึงตั้งค่าตัวนับเป็น state.counter

83
00:04:25,660 --> 00:04:29,520
ตอนนี้เรายังสนับสนุนประเภทการดำเนินการสลับใหม่นี้ด้วย

84
00:04:29,520 --> 00:04:34,290
และกลับมาใน counter.js ในtoggleCounterHandler

85
00:04:34,290 --> 00:04:36,920
เราควรส่งการกระทำดังกล่าว

86
00:04:36,920 --> 00:04:41,193
เราส่งออบเจ็กต์การดำเนินการใหม่ที่มีการสลับประเภท

87
00:04:43,840 --> 00:04:47,910
ตอนนี้เราสามารถใช้ประโยชน์จากสถานะสลับนี้ได้แล้ว

88
00:04:47,910 --> 00:04:50,360
ของรายการ counter.state

89
00:04:50,360 --> 00:04:52,630
และเพื่อสิ่งนั้น เราจำเป็นต้องเข้าถึงมัน

90
00:04:52,630 --> 00:04:57,300
So all to in the counter, we again call useSelector.

91
00:04:57,300 --> 00:05:00,910
เราสามารถใช้สิ่งนี้ได้หลายครั้งเพื่อดึงชิ้นส่วนต่างๆ

92
00:05:00,910 --> 00:05:02,940
ของข้อมูลจากรัฐ

93
00:05:02,940 --> 00:05:04,810
และที่นี่ฉันก็สนใจ

94
00:05:04,810 --> 00:05:08,173
ในข้อมูล showCounter ของฉัน

95
00:05:09,170 --> 00:05:12,570
และผมจะเก็บมันไว้ในค่าคงที่ของรายการ

96
00:05:12,570 --> 00:05:14,620
ชื่อที่แน่นอนนั้นขึ้นอยู่กับคุณ

97
00:05:15,750 --> 00:05:18,190
อีกครั้งนั่นจะอัปเดตอยู่เสมอ

98
00:05:18,190 --> 00:05:20,710
และองค์ประกอบจะได้รับการประเมินอีกครั้ง

99
00:05:20,710 --> 00:05:24,400
เมื่อใดก็ตามที่ข้อมูลที่เราเข้าถึงที่นี่มีการเปลี่ยนแปลง

100
00:05:24,400 --> 00:05:27,760
ตอนนี้ที่นี่พร้อมกับการแสดงที่แยกออกมา

101
00:05:27,760 --> 00:05:31,900
ตอนนี้เราสามารถเรนเดอร์ div นี้ได้ที่นี่แบบมีเงื่อนไข

102
00:05:31,900 --> 00:05:35,130
โดยการตรวจสอบว่าแสดงและเรนเดอร์เฉพาะ div เท่านั้น

103
00:05:35,130 --> 00:05:38,980
ถ้าแสดงจริงก็แบบนี้

104
00:05:38,980 --> 00:05:41,270
ถ้าเราบันทึกสิ่งนี้และโหลดซ้ำ

105
00:05:41,270 --> 00:05:43,340
ถ้าเราคลิก Toggle Counter มันก็หายไป

106
00:05:43,340 --> 00:05:45,730
ถ้าฉันคลิกอีกครั้ง มันก็จะอยู่ที่นั่นอีกครั้ง

107
00:05:45,730 --> 00:05:48,520
ฉันยังคงสามารถเพิ่มมันได้แม้ว่ามันจะถูกซ่อนอยู่ก็ตาม

108
00:05:48,520 --> 00:05:50,320
แต่มันจะปรากฏขึ้นก็ต่อเมื่อ

109
00:05:50,320 --> 00:05:52,690
เมื่อฉันคลิก Toggle Counter

110
00:05:52,690 --> 00:05:56,200
ดังนั้นตอนนี้ก็ใช้ได้ผลเช่นกัน และนั่นคือวิธีที่เราจะจัดการได้

111
00:05:56,200 --> 00:06:01,030
multiple different pieces of data in our state.

112
00:06:01,030 --> 00:06:04,370
แน่นอนว่าข้อมูลนี้ยังคงเชื่อมโยงอยู่

113
00:06:04,370 --> 00:06:05,853
เรามีเคาน์เตอร์แล้วรัฐ

114
00:06:05,853 --> 00:06:08,060
ไม่ว่าเราจะต้องการแสดงมันหรือไม่ก็ตาม

115
00:06:08,060 --> 00:06:10,520
แต่มันเป็นค่าที่แตกต่างกันโดยสิ้นเชิงเกินไป

116
00:06:10,520 --> 00:06:13,470
ซึ่งมีการเปลี่ยนแปลงไปในทางที่แตกต่างกันโดยสิ้นเชิง

117
00:06:13,470 --> 00:06:15,570
ดังนั้นนั่นคือวิธีที่เราสามารถจัดการได้

118
00:06:15,570 --> 00:06:17,463
ข้อมูลหลายชิ้น